<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script>
    </head>
<body style="margin:0">
    <div id="app">

        <el-container>
            <el-menu default-active="1"
                     class="el-menu-vertical-demo"
                     :collapse="isCollapsed"
                     @open="handleOpen"
                     @close="handleDialogClose"
                     background-color="#475074"
                     text-color="#878faf"
                     active-text-color="#fff">
                <div class="aside-header">
                    <i class="el-icon-s-promotion " style="font-size: 30px"></i>
                </div>
                <el-menu-item index="1" onclick="location='/'" >
                    <i class="el-icon-s-marketing"></i>
                    <span slot="title">数据看板</span>
                </el-menu-item>
                <el-menu-item index="2" >
                    <i class="el-icon-lightning"></i>
                    <span slot="title">故障中心</span>
                </el-menu-item>
                <el-menu-item index="3" >
                    <i class="el-icon-share"></i>
                    <span slot="title">节点状态管理</span>
                </el-menu-item>
                <el-menu-item index="4" >
                    <i class="el-icon-s-order"></i>
                    <span slot="title">日志数据管理</span>
                </el-menu-item>
                <el-menu-item index="5" onclick="location='/model'">
                    <i class="el-icon-first-aid-kit"></i>
                    <span slot="title">诊断模型管理</span>
                </el-menu-item>
            </el-menu>
            <div class="aside-header" id="sysTitle" style="position: absolute; margin-left: 35px" ><b>智能运维系统</b></div>
            <el-container>
            <el-header style="text-align: right; font-size: 12px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 1px" >
                <div style="float: left; font-size: 20px">
                    <i class="el-icon-s-fold " @click="handleCollapsed" id="foldButton"></i>
                </div>
                <div style="height: 54px; float: right; display:flex;align-items:center;">
                    <el-avatar src="img/head.jpeg" class="el-header-items"></el-avatar>
                    <span class="el-header-items">{{name}}</span>
                    <el-dropdown>
                        <i class="el-icon-caret-bottom el-header-items" style="margin-right: 15px; "></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>个人空间</el-dropdown-item>
                            <el-dropdown-item>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main>

                <el-row>
                    <el-card>
                        <el-row :gutter = 2>
                            <el-col :span="6" class="sumup sumup-mid">
                                <img src="img/log.png" width="20%"/>
                                <div>事件数</div>
                                <div class="sumup-num">
                                    29630
                                    <span class="levelup"><i class="el-icon-caret-top"></i>15</span>
                                </div>
                            </el-col>
                            <el-col :span="6" class="sumup sumup-mid">
                                <img src="img/exception.png" width="20%"/>
                                <div>异常数</div>
                                <div class="sumup-num">
                                    7689
                                    <span class="levelup"><i class="el-icon-caret-top"></i>10</span>
                                </div>
                            </el-col>
                            <el-col :span="6" class="sumup sumup-mid">
                                <img src="img/handle.png" width="20%"/>
                                <div>未处理</div>
                                <div class="sumup-num">
                                    533
                                    <span class="leveldown"><i class="el-icon-caret-bottom"></i>5</span>
                                </div>
                            </el-col>
                            <el-col :span="6" class="sumup">
                                <img src="img/node.png" width="20%"/>
                                <div>节点规模</div>
                                <div class="sumup-num">4367</div>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-row>
                <div style="padding-top: 10px"><h3>服务拓扑</h3></div>
                <el-row>
                    <el-card style="position: relative">
                        <el-row>
                            <el-col span="14">
                                <div class="block">
                                    <el-date-picker
                                            v-model="value2"
                                            type="datetimerange"
                                            :picker-options="pickerOptions"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            align="right">
                                    </el-date-picker>
                                </div>
                            </el-col>
                            <el-col span="10">
                                <el-radio-group v-model="isMetrics" style="float: right">
                                    <el-radio-button :label='0'>日志诊断</el-radio-button>
                                    <el-radio-button :label='1'>指标诊断</el-radio-button>
                                </el-radio-group>
                            </el-col>
                        </el-row>
                        <el-row>
                            <transition name="el-fade-in-linear">
                                <el-card  v-show="serviceInfoShow"  class="service-info">
                                    <div class="text-extra-large"><b>{{service.name}}</b></div>
                                    <div style="width: 20px; height: 3px; background: white; margin-bottom: 30px"></div>
                                    <div class="text-base">主机地址 {{service.host}}</div>
                                    <div class="text-base">服务状态 {{service.status}}</div>
                                </el-card>
                            </transition>

                            <canvas id="canvas" width="1050" height="400"></canvas>
                        </el-row>

                    </el-card>
                </el-row>

                <el-row>
                    <el-card>
                        <el-row :gutter = 20>
                            <el-col :span="19">
                                <el-cascader
                                        :options="conditions"
                                        :props="props"
                                        @change="handleConditionChange"
                                        v-model="conditionValue"
                                        style="width: 100%">
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-cascader>
                            </el-col>
                            <el-col :span="5">
                                <el-button >清除</el-button>
                                <el-button type="primary" icon="el-icon-refresh-right" circle></el-button>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-table
                                    :data="tableData"
                                    style="width: 100%"
                                    max-height="250">
                                <el-table-column
                                        fixed
                                        prop="id"
                                        label="ID"
                                        width="150">
                                </el-table-column>
                                <el-table-column
                                        prop="type"
                                        label="类型"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="level"
                                        label="等级"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="content"
                                        label="内容"
                                        width="840">
                                </el-table-column>
                                <el-table-column
                                        prop="host"
                                        label="上报主机"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="service"
                                        label="所属服务"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="first"
                                        label="首次上报时间"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="last"
                                        label="最后上报时间"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        fixed="right"
                                        label="标记为"
                                        width="110">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.status"
                                                   placeholder="未处理"
                                                   type="info"
                                                   size="small">
                                            <el-option
                                                    v-for="item in processLabel"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        fixed = "right"
                                        width = "80">
                                    <template slot-scope="scope">
                                        <el-button
                                                @click=reviewExpDetail(scope.row.id)
                                                type="text"
                                                size="small">
                                            查看详情
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-row>

                        <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="1000">
                        </el-pagination>

                    </el-card>
                </el-row>
                <el-row></el-row>
            </el-main>
        </el-container>
        </el-container>
        <el-drawer
            title="异常详情"
            :visible.sync="drawer"
            :with-header="true"
            size="60%">
            <div style="padding-left: 25px">
            <el-row>
                <span class="tip">异常编号: {{exception.id}}</span>
            </el-row>
            <el-row class="sumup-left">
                <el-col :span="6" >
                    异常类型: {{exception.type}}
                </el-col>
                <el-col :span="9">
                    上报主机: {{exception.host}}
                </el-col>
                <el-col :span="9">
                    上报服务: {{exception.service}}
                </el-col>
            </el-row>
            <el-row class="sumup-left">
                <el-col :span="6" >
                    上报次数: {{exception.report_sum}}
                </el-col>
                <el-col :span="9">
                    首次上报时间: {{exception.first_report_time}}
                </el-col>
                <el-col :span="9">
                    最后上报时间: {{exception.last_report_time}}
                </el-col>
            </el-row>
            <el-tabs v-model="activeName" @tab-click="handleClickTab">
                <el-tab-pane label="异常日志" name="first">
                    <el-row>
                        <el-alert
                                style="white-space: pre-wrap"
                                type="info">{{exception.content}}</el-alert>
                    </el-row>
                    <el-button style="float: right; margin-right: 20px"
                               type="text" @click="dialogVisible = true">查看全文</el-button>
                    <el-table
                            :data="logData"
                            style="width: 100%"
                            fit="false"
                            max-height="250"
                            :header-row-class-name="tableHeadClassName">
                        <el-table-column
                                prop="content"
                                label="历史日志"
                                width="700">
                        </el-table-column>
                        <el-table-column
                                width = "80">
                            <el-button
                                    @click="dialogVisible = true"
                                    type="text"
                                    size="small">
                                查看原文
                            </el-button>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="根因诊断" name="second">
                    <el-row>
                        <span>传播链路</span>
                    </el-row>
                    <el-timeline>
                        <el-timeline-item
                                v-for="(activity, index) in activities"
                                :key="index"
                                :icon="activity.icon"
                                :type="activity.type"
                                :color="activity.color"
                                :size="activity.size"
                                :timestamp="activity.timestamp">
                            <el-card shadow="never" style="background: #f5f6fd">
                                <div class="sumup-num" style="font-size: 16px">{{activity.kind}} #{{activity.id}}</div>
                                <div class="sumup-left">服务-{{activity.service}}</div>
                                <div class="clear sumup-left">
                                    {{activity.content}}
                                </div>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                    <el-row>
                        <span>影响范围</span>
                    </el-row>
                    <el-table
                            :data="relativeData"
                            style="width: 100%"
                            max-height="250">
                        <el-table-column
                                fixed
                                prop="id"
                                label="ID"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="type"
                                label="类型"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="relation"
                                label="调用关系"
                                width="120">
                            上游
                        </el-table-column>
                        <el-table-column
                                prop="content"
                                label="内容"
                                width="840">
                        </el-table-column>
                        <el-table-column
                                prop="service"
                                label="所属服务"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                fixed = "right"
                                width = "80">
                            <template slot-scope="scope">
                                <el-button
                                        @click=reviewExpDetail(scope.row.id)
                                        type="text"
                                        size="small">
                                    查看详情
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>


        </div>
    </el-drawer>
        <el-dialog
                title="日志记录"
                :visible.sync="dialogVisible"
                width="70%"
                :before-close="handleClose">
            <el-container style="height: 500px">
                <el-main style="background: white; white-space: pre-wrap">
                    <div>2021-12-11 14:49:02,894 - org.apache.skywalking.oap.server.library.module.BootstrapFlow - 46 [main] INFO  [] - start the provider default in alarm module.</div>
                    <div>2021-12-11 14:49:02,894 - org.apache.skywalking.oap.server.library.module.BootstrapFlow - 46 [main] INFO  [] - start the provider default in event-analyzer module.</div>
                    <div>2021-12-11 14:49:02,913 - org.apache.skywalking.oap.server.core.analysis.DispatcherManager - 117 [main] INFO  [] - Dispatcher org.apache.skywalking.oap.server.core.source.oal.rt.dispatcher.EventDispatcher is added into DefaultScopeDefine 43.</div>
                    <div>2021-12-11 14:49:02,913 - org.apache.skywalking.oap.server.library.module.BootstrapFlow - 46 [main] INFO  [] - start the provider mysql in storage module.</div>
                    <div>2021-12-11 14:49:02,914 - org.apache.skywalking.oap.server.library.server.grpc.GRPCServer - 119 [main] INFO  [] - Server started, host 0.0.0.0 listening on 11800</div>
                    <div>2021-12-11 14:49:02,915 - com.zaxxer.hikari.HikariDataSource - 80 [main] INFO  [] - HikariPool-1 - Starting...</div>
                    <div>2021-12-11 14:49:02,920 - org.eclipse.jetty.util.log - 169 [main] INFO  [] - Logging initialized @15494ms to org.eclipse.jetty.util.log.Slf4jLog</div>
                    <div style="background: #edf0f9">{{exception.content}}</div>
                </el-main>
            </el-container>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
    var startValue = 100;
        var vm = new Vue({
            el:'#app',
            data:{
                service:{},
                serviceInfoShow: false,
                drawer: false,
                dialogVisible: false,
                isCollapsed: false,
                isMetrics: 0,
                name: null,
                logData:[],
                tableData: [],
                relativeData: [],
                exception:{},
                props: { multiple: true },
                conditionValue: [],
                conditions: [{
                    value: startValue,
                    label: '服务节点',
                    children: []
                }, {
                    value: 1,
                    label: '级别',
                    children: [
                        { value: 2, label: '一般' },
                        { value: 3, label: '严重' },
                        { value: 4, label: '紧急' }
                    ]
                }, {
                    value: 5,
                    label: '状态',
                    children: [
                        { value: 6, label: '未处理' },
                        { value: 7, label: '已处理' },
                        { value: 8, label: '非异常' }
                    ]
                }],
                processLabel: [
                    { value: 0, label: '未处理' },
                    { value: 1, label: '已处理' },
                    { value: 2, label: '非异常' }
                ],
                value: 1,
                activeName: 'first',
                activities: [{
                    id: '132190',
                    kind: '日志',
                    service: 'grpc.sockshop.cart',
                    content: 'The beacon class location is jar:file:/Users/jialichun/skywalking-agent/skywalking-agent.jar!/org/apache/skywalking/apm/agent/core/boot/AgentPackagePath.class...',
                    type: 'danger',
                    size: 'large'
                }, {
                    id: '108201',
                    kind: '日志',
                    service: 'grpc.sockshop.order',
                    content: 'Options -Xverify:none and -noverify were deprecated in JDK 13 and will likely be removed in a future release....',
                }, {
                    id: '239561',
                    kind: '指标',
                    service: 'grpc.sockshop.category',
                    content: 'configFailed',
                }, {
                    id: '1000001',
                    kind: '日志',
                    service: 'springdemo',
                    content: 'Failed to bind to address /0.0.0.0:11800',
                    type: 'primary',
                    icon: 'el-icon-more',
                    size: 'large'
                }],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value2: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            },
            mounted() {
                //发送get请求
                var formData = new FormData();
                formData.append('name', '管理员');

                // this.$http.post('/api', formData)
                this.$http.post('http://localhost:8090/user',formData).then(function(res){
                    console.log(res)
                    this.name = res.body.name
                },function(){
                    console.log('请求失败处理');
                });
                this.getExceptionList([],[],[])
                this.$http.get('http://localhost:8090/serviceTopo').then(function(res){
                    console.log(res.body)
                    buildTopo(res.body)
                },function(){
                    console.log('请求失败处理');
                });
            },
            methods: {
                getExceptionList(services, levels, status) {
                    var requestData = new FormData();
                    requestData.append('services', services);
                    requestData.append('levels', levels);
                    requestData.append('status', status);
                    this.$http.post('http://localhost:8090/exception_categories', requestData).then(function(res){
                        console.log(res.body)
                        this.tableData = res.body
                    },function(){
                        console.log('请求失败处理');
                    });
                },
                showServiceInfo(serviceID, serviceName, status) {
                    this.service.id=serviceID
                    this.service.name=serviceName
                    this.service.host = "192.168.0.1"
                    if (status === 0) {
                        this.service.status = "正常"
                    } else if (status === 1) {
                        this.service.status = "异常"
                    } else {
                        this.service.status = "故障"
                    }
                    this.serviceInfoShow = true
                },
                reviewExpDetail(id) {
                    console.log("ID:"+id)
                    var requestData = new FormData();
                    requestData.append("id", id);
                    this.$http.post('http://localhost:8090/exception', requestData).then(function(res){
                        console.log(res.body)
                        this.exception = res.body.exception
                        this.logData = res.body.log_list
                    },function(){
                        console.log('请求失败处理');
                    });
                    this.$http.post('http://localhost:8090/relative_exception', requestData)
                        .then(function (res) {
                            console.log(res.body)
                            this.relativeData = res.body
                    })
                    this.drawer = true
                    this.activeName = "first"
                },
                handleClickTab(tab, event) {
                    console.log(tab, event);
                },
                tableHeadClassName({row, rowIndex}) {
                    return 'log-table-head';
                },
                handleDialogClose(done) {
                    this.$confirm('确认关闭？')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {});
                },
                handleConditionChange(value) {
                    console.log(value);
                },
                handleCollapsed(event) {
                    this.isCollapsed = !this.isCollapsed
                    if (this.isCollapsed) {
                        document.getElementById("sysTitle").style.display="none"
                        document.getElementById("foldButton").className="el-icon-s-unfold"
                    } else {
                        document.getElementById("sysTitle").style.display="block"
                        document.getElementById("foldButton").className="el-icon-s-fold"
                    }
                }
            }
        });
    var canvas = document.getElementById('canvas');
    var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
    var scene = new JTopo.Scene(stage); // 创建一个场景对象
    stage.eagleEye.visible = true; // 开启鹰眼


        // stage.click(function (event){
        //     vm.serviceInfoShow = false
        // })

    function buildTopo(topo) {

        nodeMap = new Object()

        //圆形分布
        centerX = stage.width/2
        centerY = stage.height/2
        preLimit = 0;
        circleLimit = 0;
        for( i=0; i<topo.nodes.length; i++) {
            if (i >= circleLimit) {
                let temp = circleLimit
                circleLimit = 2 * circleLimit - preLimit + 5
                preLimit = temp
            }
            let k = (circleLimit - preLimit) / 5;
            let node = topo.nodes[i];
            let angle = 2* Math.PI / circleLimit * (i - preLimit)
            newNode(node.name, centerX+100*k*Math.cos(angle), centerY+100*k*Math.sin(angle), node.id, node.type, i)

            //级连选择器
            vm.conditions[0].children.push({value:startValue+i+1, label:node.name})
        }
        for (i=0; i < topo.edges.length;i++) {
            var edge = topo.edges[i]
            newCurveLink(nodeMap[edge.source], nodeMap[edge.target], "", edge.status);
        }
    }


    function createLink(linkList) {
        for (i = 0; i < linkList.length; i++) {
            newCurveLink(nodeMap[linkList[i][0]], nodeMap[linkList[i][1]], "");
        }

    }

    function newNode(text, x, y, id, type, index) {
        if (type === 2) {
            text = text + "[故障]";
        }
        var node = new JTopo.Node(text);
        node.fontColor = '(0,0,0)';
        node.beginDegree = 0;
        node.width = node.height = 30;
        node.setLocation(x, y);
        node.fillColor = 'rgba(36,217,184, 255)';
        node.nodeColor = 'rgba(55,62,96,255)'
        if (type === 0 ) {
            node.percent = 0.8;
            node.fillColor = 'rgba(36,217,184,255)';
        } else if (type === 1) {
            node.percent = 0.8;
            node.fillColor = 'rgba(255,159,36,255)';
            node.nodeColor = 'rgba(255,159,36,255)';
        } else {
            node.percent = 1;
            node.fillColor = 'rgba(253,76,75,255)';
            node.nodeColor = 'rgba(253,76,75,255)';
            node.fontColor = '253,76,75';
        }
        node.paint = function(g){
            g.save();
            g.beginPath();
            g.moveTo(0,0);
            g.fillStyle = this.fillColor;
            g.arc(0, 0, this.width/2, this.beginDegree, this.beginDegree + 2*Math.PI*this.percent);
            g.fill();
            g.closePath();
            g.beginPath();
            g.fillStyle = 'rgba(255,255,255,' + this.alpha + ')';
            g.moveTo(0,0);
            g.arc(0, 0, this.width/2-2, this.beginDegree, this.beginDegree + 2*Math.PI);
            g.fill();
            g.closePath();
            g.beginPath();
            // g.fillStyle = 'rgba(55,62,96,' + this.alpha + ')';
            g.fillStyle = this.nodeColor;
            g.moveTo(0,0);
            g.arc(0, 0, this.width/2-4, 0,  2*Math.PI);
            g.fill();
            g.closePath();
            g.restore();
            this.paintText(g);
        };

        function paintNode() {

        }
        node.click(function(event){
            vm.getExceptionList([id],[],[])
            vm.showServiceInfo(id, text, type)
            vm.conditionValue = [
                [startValue, startValue+index+1]
            ]
            console.log("click")
        });

        nodeMap[id] = node;
        scene.add(node);
        JTopo.Animate.stepByStep(node, {
            beginDegree: 2*Math.PI
        }, 3000, true).start();
        return node;
    }

    // 曲线
    function newCurveLink(fromNode, toNode, text, status){
        var link = new JTopo.Link(fromNode, toNode, text);
        link.arrowsRadius = 15; //箭头大小
        link.lineWidth = 2; // 线宽
        if (status === 1 ) {
            link.strokeColor = '255,140,28'
        } else {
            link.strokeColor = '233,236,247';
        }
        scene.add(link);
        return link;
    }
</script>
<style>
    .text-base {
        font-size: 14px;
        line-height: 21px;
        height: 21px;
    }
    .text-extra-large {
        font-size: 20px;
        line-height: 34px;
        height: 34px;
    }
    .aside-header {
        color: white;
        height: 60px;
        line-height: 60px;
        padding-left: 18px;
    }
    .el-menu-item.is-active {
        background-color: #5473e8 !important;
    }
    .el-card {
        border: inherit;
    }
    .service-info {
        border-radius: 10px;
        width: 250px;
        height: 170px;
        background-image: url("img/service_info_bg.png");
        padding-top: 0; !important;
        color: white;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        position: absolute;
    }
    .el-header {
        background-color: white;
        color: #333;
        line-height: 54px;
        height: 54px;
        vertical-align: middle;
    }

    .el-menu {
        color: #878faf;
        background-color: #475074;
    }
    .menu-bt {
        color: #878faf;
        text-decoration: none;|
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 300px;
        min-height: 400px;
    }

    .el-main {
        background-color: #edf0f9;
    }

    .el-row {
        margin-bottom: 20px;
    }
    .el-header-items {
        margin-left: 10px;
    }
    .tip {
        border-left: 5px solid #5777e5;
        padding-left: 14px
    }
    .sumup {
        text-align: center;
        color: #8da1b4;
        font-size: 14px;
    }
    .sumup-left {
        color: #8da1b4;
        font-size: 14px;
    }
    .sumup-mid {
        border-right: 1px solid #e4ebf0;
    }
    .sumup-num {
        color: #252631;
        font-size: 20px;
        font-weight: 800;
    }
    .levelup {
        color: #f34c4b;
        font-weight: normal;
        font-size: 14px;
    }
    .leveldown {
        color: #24d9b8;
        font-weight: normal;
        font-size: 14px;
    }
    .log-table-head {
        color: #5777e5;
    }
</style>
</html>